<template>
  <!-- 基础配置页面 -->
  <div class="base-list">
    <div class="search">
      <el-button type="primary" class="btn" @click="toAdd">新增</el-button>
    </div>
    <div>
      <el-table v-loading="loading" :data="tableData" style="width: 100%">
        <el-table-column align="center" prop="id" label="序号" />
        <el-table-column align="center" prop="name" label="名称" />
        <el-table-column align="center" prop="value" label="值">
          <template slot-scope="scope">
            <el-image
              v-if="scope.row.val && scope.row.val.indexOf('http://') > -1"
              style="width: 50px; height: 40px"
              :src="scope.row.val"
              :preview-src-list="[scope.row.val]"
            />
            <span v-else>{{ scope.row.val }}</span>
          </template>
        </el-table-column>
        <el-table-column align="center" prop="introduce" label="介绍" />
        <el-table-column align="center" label="操作" width="140">
          <template slot-scope="scope">
            <el-button type="text" size="small" @click="toEdit(scope.row)"
              >编辑</el-button
            >
            <el-button type="text" size="small" @click="toDelete(scope.row.id)"
              >删除</el-button
            >
          </template>
        </el-table-column>
      </el-table>
    </div>
    <div>
      <el-dialog :title="title" :visible.sync="visible" @close="toClose">
        <el-form ref="ruleForm" :model="form" :rules="rules">
          <el-form-item prop="name" label="名称" :label-width="formLabelWidth">
            <el-input v-model="form.name" autocomplete="off" />
          </el-form-item>
          <el-form-item
            prop="introduce"
            label="介绍"
            :label-width="formLabelWidth"
          >
            <el-input v-model.number="form.introduce" autocomplete="off" />
          </el-form-item>
          <el-form-item
            v-model="form.type"
            label="类型"
            :label-width="formLabelWidth"
          >
            <el-select v-model="type" clearable>
              <el-option lable="文字" value="文字" />
              <el-option lable="图片" value="图片" />
            </el-select>
          </el-form-item>
          <el-form-item
            v-if="type == '文字'"
            label="值"
            :label-width="formLabelWidth"
          >
            <el-input v-model="form.value" />
          </el-form-item>
          <el-form-item v-else label="上传图片:" :label-width="formLabelWidth">
            <el-upload
              class="avatar-uploader"
              :action="uploadFileURL"
              :show-file-list="false"
              :on-success="handleAvatarSuccess"
              :before-upload="beforeAvatarUpload"
            >
              <img v-if="imageUrl" :src="imageUrl" class="avatar" />
              <i v-else class="el-icon-plus avatar-uploader-icon" />
            </el-upload>
          </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button @click="visible = false">取 消</el-button>
          <el-button type="primary" @click="toSave">确 定</el-button>
        </div>
      </el-dialog>
    </div>
  </div>
</template>

<script>
import { findAll, saveOrUpdate, deleteById, findByKey } from "@/api/baseConfig";
import { showFileURL, uploadFileURL } from "@/utils/config";

export default {
  data() {
    return {
      showFileURL,
      uploadFileURL,
      tableData: [],
      loading: false,
      visible: false,
      form: {},
      formLabelWidth: "80px",
      title: "",
      radio: "1",
      rules: {
        name: [
          {
            required: true,
            message: "请输入轮播图名称",
            trigger: "blur",
          },
          {
            min: 2,
            max: 5,
            message: "长度在 2 到 10 个字符",
            trigger: "blur",
          },
        ],
        introduce: [
          {
            required: true,
            message: "请输入轮播图介绍",
            trigger: "blur",
          },
        ],
      },
      url: "",
      imageUrl: "",
      form: {},
      type: "文字",
    };
  },
  computed: {},
  watch: {
    type() {
      this.form.value = "";
      this.imageUrl = "";
    },
  },
  created() {
    this.queryData();
  },
  mounted() {},
  methods: {
    async queryData() {
      this.loading = true;
      const temp = {};
      for (const key in temp) {
        console.log(key, temp[key]);
        if (!temp[key]) {
          delete temp[key];
        }
      }
      const res = await findAll(temp);
      this.loading = false;
      this.tableData = res.data;
    },
    toAdd() {
      this.title = "新增基础配置";
      this.visible = true;
      this.form = { ...row };
    },
    toSave() {
      this.$refs.ruleForm.validate(async (valid) => {
        if (valid) {
          // console.log("校验通过");
          const res = await saveOrUpdate;
          this.form;
          // console.log(res,"-----")
          this.$notify.success({
            title: "成功",
            message: res.message,
          });
          this.queryData();
          // this.toClose();
          this.visible = false;
        } else {
          return false;
        }
      });
    },
    toClose() {
      this.$refs.ruleForm.resetFields();
      /*  setTimeout(() =>{
          this.visible = false;
        },200); */
    },
    toEdit(row) {
      this.title = "编辑配置信息";
      this.visible = true;
      this.form = { ...row };
    },
    async toDelete(id) {
      const res = await deleteById({ id });
      this.$notify.success({
        title: "成功",
        message: res.message,
      });
      this.queryData();
    },
    handleAvatarSuccess(res, file) {
      console.log(res, "==图片上传成功之后的res");
      this.imageUrl = URL.createObjectURL(file.raw);
      console.log(this.imageUrl);
      this.form.value = showFileURL + res.data.id;
    },
    beforeAvatarUpload(file) {
      const isJPG = file.type === "image/jpeg";
      const isLt2M = file.size / 1024 / 1024 < 2;

      if (!isJPG) {
        this.$message.error("上传头像图片只能是 JPG 格式!");
      }
      if (!isLt2M) {
        this.$message.error("上传头像图片大小不能超过 2MB!");
      }
    },
  },
};
</script>
<style lang="scss" scoped>
.base-list {
  padding: 10px;
}
.search {
  display: flex;
  // height: 32px;
  .btn {
    margin-right: 10px;
  }
}
</style> date
